<template>
<view class="select-city" style="width: 100%;">
	<el-cascader style="width: 100%;" 
		v-model="city" 
		:options="options" 
		@change="changeValue"
		placeholder="请选择区域"
	/>
</view>
</template>

<script>
import cityOptions from "@/js_sdk/city.js"
export default{
	name:'select-city',
	props:{
		modelValue:{
			type:String,
		},
	},
	data(){
		return{
			city:[],
			options:cityOptions
		}
	},
	watch:{
		modelValue: {
			immediate: true,
			handler(val) {
				console.log(val)
				if( val ){
					let str = val.split('-')
					this.city = str
				}
			}
		},
	},
	mounted() {
		console.log(cityOptions);
	},
	methods:{
		changeValue(){
			console.log(this.city);
			this.$emit("update:modelValue",this.city.join('-'))
		}
	}
}
</script>

<style>
</style>